<template>
  <div class="notice-list">
    <div class="center-wrapper">
      <!-- back part -->
      <div class="back-part">
        <div class="back-btn" @click="goBack">
          <img src="@/assets/images/pc_black/auth/back.png" />
          <span>返回</span>
        </div>
      </div>

      <!-- notice part -->
      <div class="notice-part">
        <template v-if="!isPhone">
          <div
            class="notice-item"
            v-for="(noticeItem, index) in noticeList"
            :key="noticeItem.id"
            @click="gotoNoticeItem(noticeItem.id)"
          >
            <div class="notice-item-title">{{ noticeItem.title }}</div>
            <div class="notice-item-date">{{ noticeItem.start_time }}</div>
          </div>
        </template>
        <template v-else>
          <mescroll-vue
            ref="mescroll"
            :down="mescrollDown"
            :up="mescrollUp"
            @init="mescrollInit"
          >
            <div
              class="notice-item"
              v-for="(noticeItem, index) in noticeList"
              :key="noticeItem.id"
              @click="gotoNoticeItem(noticeItem.id)"
            >
              <div class="notice-item-title">{{ noticeItem.title }}</div>
              <div class="notice-item-date">{{ noticeItem.start_time }}</div>
            </div>
          </mescroll-vue>
        </template>

        <div class="noneTip" v-if="noticeList.length <= 0">
          <img
            class="noneTip_img"
            src="@/assets/images/mobile_black/center/null.png"
          />
          <div class="noneTip_txt">暂无公告记录</div>
        </div>
      </div>

      <!-- pag part-->
      <div class="pag-part" v-if="noticeList.length > 0">
        <el-page
          @handleCurrentChange="handleCurrentChange"
          :total="total"
          :pageSizes="[5]"
        ></el-page>
      </div>
    </div>
  </div>
</template>

<script>
// --- other ---
import MescrollVue from "mescroll.js/mescroll.vue";
// --- components ---
import ElPage from "@/components/ElPagination.vue";
// --- utils ---
import { iscode, isPhone } from "@/utils";
// --- api ---
import { noticeRecordApi } from "@/api";
// --- vuex ---
import { mapState } from "vuex";

export default {
  name: "NoticeList",
  components: { ElPage, MescrollVue },
  data() {
    return {
      // flag
      isPhone: false,
      // notice data
      noticeList: [],
      // pag data
      total: 0,
      pageSize: 5,
      currentPage: 1,
      // mescroll
      mescroll: null, // mescroll实例对象
      mescrollDown: { use: false }, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
      mescrollUp: {
        auto: false,
        // 上拉加载的配置.
        callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
        page: {
          num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
          size: 5, //每页数据条数,默认10
        },
        htmlNodata:
          '<p class="upwarp-nodata" style="display:none;font-size: 0.14583rem;font-family: Microsoft YaHei;font-weight: 600;color: #808080;">-- 没有更多了 --</p>',
        htmlLoading:
          '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip" style="font-size: 0.14583rem;font-family: Microsoft YaHei;font-weight: 600;color: #808080;">加载中..</p>',
        noMoreSize: 1, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
        isBounce: false,
      },
    };
  },
  computed: {
    // 用户信息
    ...mapState(["userInfo"]),
  },
  methods: {
    // ------ async ------
    // 获取公告历史列表
    async noticeRecord() {
      let res = await noticeRecordApi({
        page: this.currentPage,
        pagesize: this.pageSize,
      });
      if (iscode(res)) {
        this.total = res.result.count;
        this.noticeList = res.result.list;
      }
    },
    // 上拉加载
    async upCallback(page, mescroll) {
      this.mescroll = mescroll;
      let res = await noticeRecordApi({
        page: page.num,
        pagesize: page.size,
      });
      if (iscode(res)) {
        let resData = res.result.list;

        // 如果是第一页需手动置空列表
        if (page.num === 1) {
          this.noticeList = [];
        }
        // 把请求到的数据添加到列表
        this.noticeList = [...this.noticeList, ...resData];

        // 数据渲染成功后,隐藏下拉刷新的状态
        this.$nextTick(() => {
          this.mescroll.endSuccess(resData.length);
        });
      }
    },

    // ------ mecsroll ------
    // 初始化组件实例，可获取到mescroll对象
    mescrollInit(mescroll) {
      this.mescroll = mescroll; // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
    },

    // ------ page ------
    // change page
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.noticeRecord();
    },

    // ------ goto ------
    // goto notice item page
    gotoNoticeItem(id) {
      this.$router.push({
        path: "/noticeItem",
        query: {
          id,
        },
      });
    },
    // go back
    goBack() {
      history.back();
    },
  },
  created() {
    // 判断是否是移动端
    this.isPhone = isPhone();
    // 获取公告历史
    this.noticeRecord();
  },
  mounted() {
    let isLogin = JSON.parse(localStorage.getItem("isLogin"));
    if (isLogin) {
      let nn = this.userInfo.notice_num;
      localStorage.setItem("noticeNum", JSON.stringify(nn));
    }
  },
};
</script>

<style lang="less" scoped>
.notice-list {
  // min-height: 900px;

  // center wrapper
  .center-wrapper {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
  }

  // back part
  .back-part {
    width: 100%;
    padding-top: 20px;

    .back-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 104px;
      height: 30px;
      border: none;
      background: none;
      background-image: url("../../assets/images/personalCenter/btn.png");
      background-position: center center;
      background-size: 100% 100%;
      cursor: pointer;

      img {
        width: 20px;
        height: 6px;
      }

      span {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 12px;
        margin-left: 10px;
      }
    }
  }

  // notice part
  .notice-part {
    width: 100%;
    margin-top: 50px;
    min-height: 500px;

    .notice-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 100%;
      height: 80px;
      background: #1e2020;
      border-radius: 6px;
      box-sizing: border-box;
      padding: 0 30px;
      margin-bottom: 20px;
      cursor: pointer;
      transition: all 0.3s ease;

      .notice-item-title {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 16px;
      }

      .notice-item-date {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #999999;
        line-height: 14px;
        margin-top: 7px;
      }
    }

    .notice-item:hover {
      background: #252727;
    }

    // 数据空时的提示语
    .noneTip {
      text-align: center;
      margin-top: 30px;
      font-size: 20px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: bold;
      opacity: 0.6;

      .noneTip_txt {
        width: 100%;
        font-size: 14px;
        color: #999;
        margin-top: 20px;
        text-align: center;
      }

      .noneTip_img {
        width: 260px;
      }
    }
  }

  // pag part
  .pag-part {
    display: flex;
    justify-content: center;
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .notice-list {
    .back-part,
    .pag-part {
      display: none;
    }

    .center-wrapper {
      width: 100%;
      // padding: 0 30px;
      // border: 1px solid red;
    }

    .notice-part {
      // margin-top: 50px;
      min-height: auto;

      .notice-item {
        height: 160px;
        border-radius: 12px;
        padding: 0 60px;
        margin-bottom: 30px;
        background-color: #252727;

        .notice-item-title {
          font-size: 32px;
          line-height: 32px;
        }

        .notice-item-date {
          font-size: 24px;
          line-height: 28px;
          margin-top: 14px;
        }
      }

      // 数据空时的提示语
      .noneTip {
        text-align: center;
        margin-top: 60px;
        font-size: 40px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: bold;
        opacity: 0.6;

        .noneTip_txt {
          width: 100%;
          font-size: 28px;
          color: #999;
          margin-top: 40px;
          text-align: center;
        }

        .noneTip_img {
          width: 480px;
        }
      }
    }
  }

  // mescroll
  .mescroll {
    position: fixed;
    left: 0;
    top: 110px;
    bottom: 0;
    height: auto;
    padding: 0 30px;
  }
}
</style>
